<template>
    <div class="cmain">
        <div class="head">
            <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
                <el-step title="选取文件" ></el-step>
                <el-step title="上传文件" ></el-step>
                <el-step title="上传成功" ></el-step>
            </el-steps>
        </div>
        <div class="main">
            <div class="chead">
                <span>请按照要求提交文件到对应的位置并完善相应的信息</span>
                <div class="line"></div>
            </div>
            <div class="body">
                <el-upload
                  class="upload-demo"
                  drag
                  ref="upload"
                  action="#"
                  accept=".xls"
                  :http-request="uploadfile"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <div slot="tip" class="el-upload__tip">请依次上传用户表,课程表,实验表,班级表四个文件</div>
                  <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过500kb</div>
                  <div slot="tip" class="el-upload__tip">
                      <el-button type="text" @click="open1">用户要求</el-button>
                      <el-button type="text" @click="open2">课程要求</el-button>
                      <el-button type="text" @click="open3">实验室要求</el-button>
                      <el-button type="text" @click="open4">班级要求</el-button>
                  </div>
                </el-upload>
            </div>
            <div>
                  <el-button type="success" @click="submitUpload" class="button">确认上传</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: [
        { name: '例子1.xls' },
        { name: '例子2.xlsx' }
      ],
      active: 1
    }
  },
  methods: {
    submitUpload () {
      this.$refs.upload.submit()
      this.active = 2
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    async uploadfile (file) {
      var filelist = new FormData()
      filelist.append('file', file.file)
      console.log(filelist.get('file'))
      await this.$http.post(
        '/file/uploadFiles',
        { 'Content-Type': 'multipart/form-data' },
        filelist
      ).then(res => {
        console.log(res)
        this.active = 3
        this.$message.success('文件上传成功')
      })
    },
    open1 () {
      this.$alert('用户需要包含用户名，密码，教师名称三个属性', '用户要求', {
        confirmButtonText: '确定',
        callback: action => {
        }
      })
    },
    open2 () {
      this.$alert('课程需要包含名称，课程时长两个属性', '课程要求', {
        confirmButtonText: '确定',
        callback: action => {
        }
      })
    },
    open3 () {
      this.$alert('实验室需要包含实验室名称，实验室类型，实验室的大小，实验室的位置四个属性', '实验室要求', {
        confirmButtonText: '确定',
        callback: action => {
        }
      })
    },
    open4 () {
      this.$alert('班级需要包含班级名称，班级人数两个属性', '班级要求', {
        confirmButtonText: '确定',
        callback: action => {
        }
      })
    }
  }
}
</script>
<style>
</style>
<style lang="less" scoped>
.button{
  width: 100%;
  position: relative;
  top: 20px;
}
.cmain{
  width: 70%;
  height: 80%;
  position: relative;
  left: 15%;
}
.el-upload__tip{
  font-size: 15px;
  font-weight: 500;
  opacity: 0.8;
}
.main{
  position: relative;
  top: 20px;
  height: 80%;
  overflow: auto;
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .chead{
    width: 60%;
    position: relative;
    left: 20%;
    top: 20px;
    .line{
      height: 2px;
      background: #B3C0D1;
      width: 100%;
      position: relative;
      top: 15px;
    }
  }
  .chead span{
    font-size: 22px;
    opacity: 0.8;
    font-weight: 500;
    position: relative;
    left: 10%;
  }
  .body{
    position: relative;
    width: 40%;
    top: 60px;
    left: 35%;
    .upload-demo{
      width: 100%;
      .el-upload.el-upload--text{
        width: 100%;
        .el-upload-dragger{
          width: 100%;
        }
      }
    }
  }
}
.button{
  width: 34%;
  position:relative;
  top: 60px;
  left: 35%;
}
.el-input{
  width: 40%;
}
.demo-input-suffix{
  position:relative;
  left: 30%;
  width: 80%;
}
</style>
